<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-统计</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
    <script src="/static/js/echarts/echarts.js"></script>
    <script src="/static/js/moment.js"></script>
    <script src="./js/statisticsManage.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
   <div style="margin-left:100px;">
       <!--一年内的-->
       <h3>
           <span>借书服务量统计</span>
           <span></span>
       </h3>
       <div id="borrowWrap" style="width: 80%;height:250px;"> </div>

       <h3>
           <span>还书服务量统计</span>
           <span></span>
       </h3>
       <div id="backWrap" style="width: 80%;height:250px;"> </div>

       <h3>
           <span>办证服务量统计</span>
           <span></span>
       </h3>
       <div id="registerWrap" style="width: 80%;height:250px;"> </div>
   </div>

</body>

<script type="text/javascript">
    let borrowChart = echarts.init(document.getElementById('borrowWrap'));//指定echarts最终呈现的位置
    let backChart = echarts.init(document.getElementById('backWrap'));//指定echarts最终呈现的位置
    let registerChart = echarts.init(document.getElementById('registerWrap'));//指定echarts最终呈现的位置
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                backStatistics:[],
                borrowStatistics:[],
                registerStatistics:[],
                calcYearMonth:[]
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                let nowYear = new Date().getFullYear();
                let month = new Date().getMonth() + 1 ;
                that.calcYearMonth = [];
                for(let i = 1; i < 14;i++){
                    that.calcYearMonth.push(moment(new Date(nowYear,month-i)).format("YYYY-MM"));
                }
                that.getAllStatisticsMethod();
            });
        },
        methods: {
            getAllStatisticsMethod(){
                let that = this;
                that.backStatistics = [];
                that.borrowStatistics = [];
                that.registerStatistics = [];
                requestApi("statistics/getStatistics",{},'post',function(res){
                    if (res.code === 0) {
                        that.backStatistics = res.data.backStatistics;
                        that.borrowStatistics = res.data.borrowStatistics;
                        that.registerStatistics = res.data.registerStatistics;
                        that.showBorrowStatistics();
                        that.showBackStatistics();
                        that.showRegisterStatistics();

                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },
            //借书统计
            showBorrowStatistics(){
                let that = this;
                let xAxisYear = [];
                let yAxisYear = [];
                for(let i = 0 ;i < that.calcYearMonth.length ; i++){
                    let num = null;
                    for(let j = 0 ; j< that.borrowStatistics.length ; j++){
                        let formatDate = moment(new Date(that.borrowStatistics[j].years,that.borrowStatistics[j].months - 1)).format("YYYY-MM")
                        if(that.calcYearMonth[i] === formatDate){
                            num += that.borrowStatistics[j].num;
                        }
                    }
                    xAxisYear.push(that.calcYearMonth[i]);
                    yAxisYear.push( {
                        "value" : num,
                    });
                }
                // 指定图表的配置项和数据
                setStaticsManageEchartBar(borrowChart,"借阅册次","借阅册次",xAxisYear,yAxisYear);
            },

            //还书统计
            showBackStatistics(){
                let that = this;
                let xAxisYear = [];
                let yAxisYear = [];
                for(let i = 0 ;i < that.calcYearMonth.length ; i++){
                    let num = null;
                    for(let j = 0 ; j< that.backStatistics.length ; j++){
                        let formatDate = moment(new Date(that.backStatistics[j].years,that.backStatistics[j].months - 1)).format("YYYY-MM")
                        if(that.calcYearMonth[i] === formatDate){
                            num += that.backStatistics[j].num;
                        }
                    }
                    xAxisYear.push(that.calcYearMonth[i]);
                    yAxisYear.push( {
                        "value" : num,
                    });
                }
                // 指定图表的配置项和数据
                setStaticsManageEchartBar(backChart,"还书册次","还书册次",xAxisYear,yAxisYear);
            },

            //还书统计
            showRegisterStatistics(){
                let that = this;
                let xAxisYear = [];
                let yAxisYear = [];
                for(let i = 0 ;i < that.calcYearMonth.length ; i++){
                    let num = null;
                    for(let j = 0 ; j< that.registerStatistics.length ; j++){
                        let formatDate = moment(new Date(that.registerStatistics[j].years,that.registerStatistics[j].months - 1)).format("YYYY-MM")
                        if(that.calcYearMonth[i] === formatDate){
                            num += that.registerStatistics[j].num;
                        }
                    }
                    xAxisYear.push(that.calcYearMonth[i]);
                    yAxisYear.push( {
                        "value" : num,
                    });
                }
                // 指定图表的配置项和数据
                setStaticsManageEchartBar(registerChart,"办证人数","办证人数",xAxisYear,yAxisYear);
            },



        }
    })
</script>
</html>